<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="statics/css/default.css" rel="stylesheet">

</head>
<body>

	<div class="header row">

		<div class="col-1"></div>
		<nav class="col-8 ">
			<div class="col-12 navbar navbar-expand-lg navbar-light">


				<a class="navbar-brand btn " href="#">Urchin</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav mr-auto">
						<li class="nav-item active">
							<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Dropdown
							</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
					</ul>
					<form class="form-inline my-2 my-lg-0">
						<input class="form-control mr-sm-2" type="search" placeholder="Search Here" aria-label="Search">
						<button class="btn bg-white text-dark border my-2 my-sm-0" type="submit">Search</button>
					</form>
				</div>
			</div>
		</nav>
		<div class="col-3"></div>
	</div>

	<!-- 侧边滚动导航 -->
	<div class="position-fixed top-bar offset-md-1">
		<div class="btn-group-vertical" role="group" aria-label="Basic example">
			<button type="button" class="btn btn-default"><i>^</i><br>Top</button>
			<button type="button" class="btn btn-default">MENU</button>
			<button type="button" class="btn btn-default">Down<br><i>v</i></button>
		</div>

		<ul class="nav justify-content-center">
			<li class="nav-item">
				<a class="nav-link active" href="#">Active</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Link</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Link</a>
			</li>
			<li class="nav-item">
				<a class="nav-link disabled" href="#">Disabled</a>
			</li>
		</ul>
	</div>

	<!--主内容-->
	<div class="container-fluid content-box row">
		<div class="col-md-1 left-con">
			<!--左侧栏暂时留空-->
		</div>
        <!--主内容-->
		<div class="col-12 col-md-8 col-xl-8 py-md-3 pl-md-3">
			<div class="col-12 con-list">
				<div class="con-slider-nav">∨∨∨</div>

				<div class="row con-list-li con-list-li-hover">
					<div class="li-con ">
						<div class="li-con-tit">
							<h3 class="mt-0">Media heading </h3><i class="dis">new</i><div class="clear"></div>
						</div>
						<div class="li-con-desc">
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
						</div>
						<div class="li-con-nav">

							<span class="note">300</span>
							<span class="bomb">0</span>
							<span class="time">2018.03.24 </span>
							<div class="clear"></div>
						</div>
					</div>
					<div class="li-pic">
						<div class="img-box">
							<img class="thumb" src="./uploads/5.jpg" alt=""/>
						</div>


					</div>

				</div>
				<div class="row con-list-li con-list-li-hover">
					<div class="li-con ">
						<div class="li-con-tit">
							<h3 class="mt-0">Media heading </h3><i class="dis">new</i><div class="clear"></div>
						</div>
						<div class="li-con-desc">
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
						</div>
						<div class="li-con-nav">

							<span class="note">300</span>
							<span class="bomb">0</span>
							<span class="time">2018.03.24 </span>
							<div class="clear"></div>
						</div>
					</div>
					<div class="li-pic">
						<div class="img-box">
							<img class="thumb" src="./uploads/5.jpg" alt=""/>
						</div>


					</div>

				</div>
				<div class="row con-list-li con-list-li-hover">
					<div class="li-con ">
						<div class="li-con-tit">
							<h3 class="mt-0">Media heading </h3><i class="dis">new</i><div class="clear"></div>
						</div>
						<div class="li-con-desc">
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
						</div>
						<div class="li-con-nav">

							<span class="note">300</span>
							<span class="bomb">0</span>
							<span class="time">2018.03.24 </span>
							<div class="clear"></div>
						</div>
					</div>
					<div class="li-pic">
						<div class="img-box">
							<img class="thumb" src="./uploads/5.jpg" alt=""/>
						</div>


					</div>

				</div>
				<div class="row con-list-li con-list-li-hover">
					<div class="li-con ">
						<div class="li-con-tit">
							<h3 class="mt-0">Media heading </h3><i class="dis">new</i><div class="clear"></div>
						</div>
						<div class="li-con-desc">
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
						</div>
						<div class="li-con-nav">

							<span class="note">300</span>
							<span class="bomb">0</span>
							<span class="time">2018.03.24 </span>
							<div class="clear"></div>
						</div>
					</div>
					<div class="li-pic">
						<div class="img-box">
							<img class="thumb" src="./uploads/5.jpg" alt=""/>
						</div>


					</div>

				</div>
                <div class="row con-list-li con-list-li-hover">
                    <div class="li-con col-9">
                        <div class="li-con-tit">
                            <h3 class="mt-0">Media heading </h3><i class="dis">new</i><div class="clear"></div>
                        </div>
                        <div class="li-con-desc">
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
                        </div>
                        <div class="li-con-nav">

                            <span class="note">300</span>
                            <span class="bomb">0</span>
                            <span class="time">2018.03.24 </span>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="li-pic col-3">
                        <img class="thumb" src="./uploads/1.jpg" alt=""/>

                    </div>

                </div>
			</div>
		</div>


        <!--中栏-->
		<div class="col-md-2 col-xl-2 py-md-3 pl-md-3 middle-con">

			<ul class="nav flex-column">
				<li class="nav-item ">
					<a class="nav-link active" href="#">- PHP</a>
					<ul class="nav flex-column sec-nav">
						<li class="nav-item ">
							<a class="nav-link active" href="#">- PHP</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">- Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">- Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">- Disabled</a>
						</li>
					</ul>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">+ Link</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">+ Link</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">+ Disabled</a>
				</li>
			</ul>


			<div class="list-group friend-link">
				<a href="#" class="list-group-item active">
					About me
				</a>
				<a href="#" class="list-group-item">Other Links</a>
				<a href="#" class="list-group-item">Study NewWebsite</a>
				<a href="#" class="list-group-item">consectetur ac</a>
				<a href="#" class="list-group-item">Vestibulum</a>
			</div>

            <div class="slide-box">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval = 2000 data-pause = "hover" data-wrap="true" style=" margin-left:auto; margin-right:auto;">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="./uploads/4.jpg" alt="...">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="./uploads/4.jpg" alt="...">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="./uploads/4.jpg" alt="...">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>
                    </div>
                    <a class="left carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>

                </div>
            </div>


		</div>
		<!--右侧栏-->
		<div class="col-md-1 col-xl-1 py-md-3 pl-md-3 right-con">
			<div class="list-group ad">
				<a href="#" class="list-group-item active">
					<img src="./uploads/4.jpg" alt="...">
					<span class="badge">AD</span>
				</a>
				<a href="#" class="list-group-item">
					<img src="./uploads/4.jpg" alt="...">
					<span class="badge">AD</span>
				</a>
				<a href="#" class="list-group-item">
					<img src="./uploads/4.jpg" alt="...">
					<span class="badge">AD</span>
				</a>
				<a href="#" class="list-group-item">
					<img src="./uploads/4.jpg" alt="...">
					<span class="badge">AD</span>
				</a>
			</div>


		</div>
	</div>

<!--底部-->
<div class="footer">

	<div class="container copyright">
	Copyright @2019 Urchinstarz
	</div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script>
        $('.carousel').carousel({
            interval: 2000
        })
	</script>

</body>
</html>